<template>
  <section class="editor-box" role="input">
    <div></div>
    <div :style="{height:height+'px'}"></div>
    <el-input v-model="initHtml" @change="changeInput" v-show="false"></el-input>
  </section>
</template>
<script>
import OssFile from "@/_js/OssFile.js";
//注意编辑器的菜单不能折叠，请把宽度设大
import Config from "@/_config/config.js";
export default {
  props: {
    value: {},
    toolbar: {},
    height: {
      type: Number,
      default: 300
    }
  },
  data() {
    return {
      editor: null,
      initHtml: ""
    };
  },
  created() {
    let th = this;
    th.initHtml = th.value;
  },
  mounted() {
    let th = this;
    let children = th.$el.children;
    let toolbar = [
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入图片
      "table" // 表格
      //   "video", // 插入视频
      //   "code", // 插入代码
      //   "undo", // 撤销
      //   "redo" // 重复
    ];
    th.$utils.isObject("wangEditor", function() {
      th.editor = new wangEditor(children[0], children[1]);
      th.editor.customConfig.onchange = function(html) {
        // 监控变化，同步更新到 textarea
        if (html == "<p><br></p>") html = "";
        th.initHtml = html;
        th.$emit("input", html);
      };
      th.editor.customConfig.customUploadImg = function(files, insert) {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        // 上传代码返回结果之后，将图片插入到编辑器中
        let file = files[0];
        if (file.size > 5 * 1024 * 1024) {
          th.$message.warning("图片过大");
        } else {
          th.$message.warning("图片正在上传，请稍后");
          th.$api.getTemporaryAKAndToken("web").then(res => {
            if (res.excute) {
              OssFile.uploadImage(files[0], res)
                .then(res => {
                  th.$message.warning("上传完成");
                  insert(Config.imageUrl + res.path);
                })
                .catch(function(err) {
                  th.$message.error("上传出错");
                });
            }
          });
        }
      };
      th.editor.customConfig.menus = th.toolbar || toolbar;
      th.editor.create();
      th.editor.txt.html(th.initHtml);
    });
  },
  methods: {
    changeInput(e) {
      let th = this;
      th.$emit("change", th.initHtml);
    }
  },
  watch: {
    value(n) {
      let th = this;
      th.$nextTick(function() {
        if (n) {
          if (th.initHtml == "") {
            if (th.editor) th.editor.txt.html(n);
          }
        } else {
          th.editor.txt.html("");
        }
        th.initHtml = n;
      });
    }
  }
};
</script>
<style lang="scss">
.editor-box {
  > div:nth-child(1) {
    border: 1px solid #ccc;
    border-bottom-color: transparent;
  }
  > div:nth-child(2) {
    border: 1px solid #ccc;
  }
}
</style>



